<script lang="ts">
	export let withText = false;

	type ThemeConf = {
		primary: string;
		secondary: string;
		tertiary: string;
	};

	const themes = {
		'gold-caramel': {
			primary: '#F7B155',
			secondary: '#72470D',
			tertiary: '#BB6F5D',
		},
		strawberry: {
			primary: '#F25E67',
			secondary: '#A1242B',
			tertiary: '#BB6F5D',
		},
		white: {
			primary: '#FFFFFF',
			// 50% opacity
			secondary: '#FFFFFF80',
			tertiary: '#FFFFFF80',
		},
		black: {
			primary: '#171717',
			// 50% opacity
			secondary: '#17171780',
			tertiary: '#17171780',
		},
	} satisfies Record<string, ThemeConf>;

	export let theme: keyof typeof themes = 'gold-caramel';

	export let textColor: 'primary' | 'white' | 'black' = 'primary';
	$: resolvedTextColor = {
		primary: themes[theme].primary,
		white: '#FFFFFF',
		black: '#171717',
	}[textColor];

	let className = '';
	export { className as class };
</script>

{#if withText}
	<svg class={className} viewBox="0 0 245 102" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M34 76.7227C34 75.0658 32.6569 73.7227 31 73.7227C23.268 73.7227 17 80.0527 17 87.8613V93.4157C17 98.1562 20.8056 102 25.5 102C30.1944 102 34 98.1562 34 93.4157V76.7227Z"
			fill={themes[theme].tertiary}
		/>
		<path
			d="M0 63.6831C0 66.9968 2.68629 69.6831 6 69.6831H45C48.3137 69.6831 51 66.9968 51 63.6831V35.3465L25 19.693C14.6872 11.986 0 19.3454 0 32.2198V63.6831Z"
			fill={themes[theme].secondary}
		/>
		<path
			d="M51 27.5C51 13.4167 39.5833 2 25.5 2C11.4167 2 0 13.4167 0 27.5V66.8136C0 69.6779 2.32205 72 5.18644 72C8.05083 72 10.3729 69.6779 10.3729 66.8136V52.9703C10.3729 50.2253 12.5982 48 15.3432 48C18.0883 48 20.3136 50.2253 20.3136 52.9703V60.4306C20.3136 63.295 22.6356 65.617 25.5 65.617H26.0375C28.605 65.617 30.6864 63.5356 30.6864 60.9681V60.6101C30.6864 58.2403 32.6076 56.3191 34.9774 56.3191H35.478C37.6086 56.3191 39.5919 57.4065 40.7377 59.2028C41.3506 60.1637 42.3679 60.7929 43.5014 60.9123L44.5189 61.0195C47.9829 61.3843 51 58.6683 51 55.1852V27.5Z"
			fill={themes[theme].primary}
		/>
		<path
			d="M139.406 74.25C138.031 74.25 136.906 73.7917 136.031 72.875C135.156 71.9375 134.719 70.7708 134.719 69.375V54.3438C134.719 51.8438 134.146 49.9479 133 48.6562C131.854 47.3438 130.25 46.6875 128.188 46.6875C126.021 46.6875 124.302 47.4167 123.031 48.875C121.76 50.3333 121.125 52.2604 121.125 54.6562V69.375C121.125 70.7917 120.677 71.9583 119.781 72.875C118.906 73.7917 117.792 74.25 116.438 74.25C115.083 74.25 113.958 73.7917 113.062 72.875C112.188 71.9375 111.75 70.7708 111.75 69.375V54.3438C111.75 51.8438 111.177 49.9479 110.031 48.6562C108.885 47.3438 107.281 46.6875 105.219 46.6875C103.052 46.6875 101.333 47.4167 100.062 48.875C98.7917 50.3333 98.1562 52.2604 98.1562 54.6562V69.375C98.1562 70.8125 97.7188 71.9896 96.8438 72.9062C95.9896 73.8021 94.875 74.25 93.5 74.25C92.125 74.25 91 73.7917 90.125 72.875C89.25 71.9583 88.8125 70.7917 88.8125 69.375V43.25C88.8125 41.8125 89.25 40.6458 90.125 39.75C91 38.8333 92.125 38.375 93.5 38.375C94.7083 38.375 95.7188 38.7292 96.5312 39.4375C97.3646 40.1458 97.875 41.0833 98.0625 42.25C99.0625 40.9375 100.375 39.9375 102 39.25C103.646 38.5417 105.469 38.1875 107.469 38.1875C109.844 38.1875 111.969 38.625 113.844 39.5C115.719 40.375 117.25 41.6458 118.438 43.3125C120.792 39.8958 124.708 38.1875 130.188 38.1875C134.354 38.1875 137.708 39.4896 140.25 42.0938C142.812 44.6771 144.094 48.2708 144.094 52.875V69.375C144.094 70.7917 143.646 71.9583 142.75 72.875C141.875 73.7917 140.76 74.25 139.406 74.25ZM171.281 74.4375C165.594 74.4375 161.042 72.8021 157.625 69.5312C154.208 66.2396 152.5 61.8438 152.5 56.3438C152.5 51.0104 154.146 46.6562 157.438 43.2812C160.75 39.8854 165 38.1875 170.188 38.1875C175.188 38.1875 179.229 39.6771 182.312 42.6562C185.417 45.6146 186.969 49.4062 186.969 54.0312C186.969 55.8438 186.573 57.1771 185.781 58.0312C184.99 58.8646 183.76 59.2812 182.094 59.2812H161.875C162.208 61.3229 163.26 62.9375 165.031 64.125C166.802 65.2917 169.031 65.875 171.719 65.875C174.656 65.875 176.979 65.0521 178.688 63.4062C180.146 62.4479 181.469 61.9688 182.656 61.9688C184.99 61.9688 186.156 63.1979 186.156 65.6562C186.156 66.6979 185.74 67.7812 184.906 68.9062C183.677 70.6354 181.812 71.9896 179.312 72.9688C176.833 73.9479 174.156 74.4375 171.281 74.4375ZM161.875 52.0938H177.719C177.448 50.0521 176.615 48.4583 175.219 47.3125C173.823 46.1458 172.021 45.5625 169.812 45.5625C167.604 45.5625 165.792 46.1458 164.375 47.3125C162.979 48.4792 162.146 50.0729 161.875 52.0938ZM200.375 74.25C198.979 74.25 197.844 73.8021 196.969 72.9062C196.115 71.9896 195.688 70.8125 195.688 69.375V32.625C195.688 31.1875 196.115 30.0208 196.969 29.125C197.844 28.2083 198.979 27.75 200.375 27.75C201.75 27.75 202.865 28.2083 203.719 29.125C204.594 30.0208 205.031 31.1875 205.031 32.625V69.375C205.031 70.8125 204.594 71.9896 203.719 72.9062C202.865 73.8021 201.75 74.25 200.375 74.25ZM230.594 74.4375C227.365 74.4375 224.719 73.4271 222.656 71.4062C220.594 69.3854 219.562 66.7188 219.562 63.4062V47.5312H216.125C214.854 47.5312 213.802 47.1354 212.969 46.3438C212.156 45.5521 211.75 44.5417 211.75 43.3125C211.75 42.0833 212.156 41.0833 212.969 40.3125C213.781 39.5208 214.833 39.125 216.125 39.125H219.562V33.6875C219.562 32.25 220 31.0833 220.875 30.1875C221.75 29.2708 222.875 28.8125 224.25 28.8125C225.646 28.8125 226.771 29.2708 227.625 30.1875C228.5 31.0833 228.938 32.25 228.938 33.6875V39.125H236.625C237.917 39.125 238.969 39.5208 239.781 40.3125C240.594 41.0833 241 42.0833 241 43.3125C241 44.5417 240.583 45.5521 239.75 46.3438C238.938 47.1354 237.896 47.5312 236.625 47.5312H228.938V62C228.938 64.375 229.917 65.5625 231.875 65.5625C232.771 65.5625 233.854 65.0729 235.125 64.0938C236.146 63.3021 237.208 62.9062 238.312 62.9062C239.375 62.9062 240.24 63.25 240.906 63.9375C241.573 64.625 241.906 65.5208 241.906 66.625C241.906 68.3958 241.188 69.9375 239.75 71.25C238.667 72.2292 237.312 73 235.688 73.5625C234.062 74.1458 232.365 74.4375 230.594 74.4375Z"
			fill={resolvedTextColor}
		/>
	</svg>
{:else}
	<svg class={className} viewBox="0 0 51 102" fill="none" xmlns="http://www.w3.org/2000/svg">
		<path
			d="M34 76.7227C34 75.0658 32.6569 73.7227 31 73.7227C23.268 73.7227 17 80.0527 17 87.8613V93.4157C17 98.1562 20.8056 102 25.5 102C30.1944 102 34 98.1562 34 93.4157V76.7227Z"
			fill={themes[theme].tertiary}
		/>
		<path
			d="M0 63.6831C0 66.9968 2.68629 69.6831 6 69.6831H45C48.3137 69.6831 51 66.9968 51 63.6831V35.3465L25 19.693C14.6872 11.986 0 19.3454 0 32.2198V63.6831Z"
			fill={themes[theme].secondary}
		/>
		<path
			d="M51 27.5C51 13.4167 39.5833 2 25.5 2C11.4167 2 0 13.4167 0 27.5V66.8136C0 69.6779 2.32205 72 5.18644 72C8.05083 72 10.3729 69.6779 10.3729 66.8136V52.9703C10.3729 50.2253 12.5982 48 15.3432 48C18.0883 48 20.3136 50.2253 20.3136 52.9703V60.4306C20.3136 63.295 22.6356 65.617 25.5 65.617H26.0375C28.605 65.617 30.6864 63.5356 30.6864 60.9681V60.6101C30.6864 58.2403 32.6076 56.3191 34.9774 56.3191H35.478C37.6086 56.3191 39.5919 57.4065 40.7377 59.2028C41.3506 60.1637 42.3679 60.7929 43.5014 60.9123L44.5189 61.0195C47.9829 61.3843 51 58.6683 51 55.1852V27.5Z"
			fill={themes[theme].primary}
		/>
	</svg>
{/if}
